<template>
    <!-- 列表 -->
    <div>
        <!-- <ContentWrap> -->
            <el-button class="mb-10px" type="primary" @click="openForm('新增')" v-hasPermi="['beidaTemplate:saveOrUpdate']">新增</el-button>
            <el-table v-loading="loading" :data="list" row-key="id" stripe  header-cell-class-name="custom-header">
                <el-table-column align="center" :show-overflow-tooltip="true" label="模板名称" prop="templateName"
                    width="350">
                    <template #default="scope">
                    <el-button type="text" @click="openForm('查看', scope.row.id)" v-hasPermi="['beidaTemplate:getById']">
                        {{ scope.row.templateName }}
                    </el-button>
                </template>
                </el-table-column>
                <el-table-column align="center" :show-overflow-tooltip="true" label="模板ID" prop="templateId"
                width="250" />
                <el-table-column align="center" :show-overflow-tooltip="true" label="消息是否带链接" prop="isLink">
                    <template #default="scope">
                        <span>{{ scope.row.isLink ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" :show-overflow-tooltip="true" label="长时间显示" prop="isLongTimeDisplay">
                    <template #default="scope">
                        <span>{{ scope.row.isLongTimeDisplay ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="启用" prop="isEnable">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isEnable" active-value="1" inactive-value="0"
                            @click="onChangeStateClick(scope.row)" :disabled="!checkPermissions(['beidaTemplate:updateStatus'])"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template #default="scope">
                        <!-- <el-button v-hasPermi="['arriveNotice:messageTemplate:detail']" link type="primary"
                        @click="openForm('查看', scope.row.id)">
                        查看
                    </el-button> -->
                        <el-button link type="primary" @click="openForm('修改', scope.row.id, scope.row)" v-hasPermi="['beidaTemplate:saveOrUpdate']">
                            修改
                        </el-button>
                        <el-button link type="danger" @click="handleDelete(scope.row.id,scope.row)" v-hasPermi="['beidaTemplate:delete']">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
                @pagination="getList" />
        <!-- </ContentWrap> -->
    </div>

</template>
<script lang="ts" setup>
import * as messageTemplateApi from '@/api/infoArrive/arriveNotice/messageTemplate/index'
import { disable } from 'ol/rotationconstraint';
// import MessageTemplateForm from './messageTemplateForm.vue'

defineOptions({ name: 'MessageTemplate' })
const emit = defineEmits(['openForms'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10
})
/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await messageTemplateApi.getTemplateList(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}
/** 添加/修改操作 */
const openForm = (type: string, id?: number, row?: any) => {
    if (type == '修改' && row.isEnable == '1') {
        message.notifyWarning('启用状态下不能进行修改操作！')
        return
    }
    emit('openForms',{type, id ,typeForm:'addTemplate'})
}

/** 删除按钮操作 */
const handleDelete = async (id: number,row:any) => {
    if (row.isEnable == '1') {
        message.notifyWarning('启用状态下不能进行删除操作！')
        return
    }
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        await messageTemplateApi.deleteTemplate([id])
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}

/** 修改状态 **/
const onChangeStateClick = async (row: any) => {
    try {
        // 修改状态的二次确认
        const text = row.isEnable === '1' ? '启用' : '停用'
        await message.confirm('确认要"' + text + '""' + row.templateName + '"的数据吗?')
        await messageTemplateApi.enableTemplate({ status: row.isEnable, id: row.id });
        message.success(text + '成功')
        await getList()
    } catch {
        row.isEnable =
            row.isEnable === '1' ? '0' : '1'
    }
}
defineExpose({ getList }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {
    getList()
})
</script>

<style scoped>
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
.titleFont {
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}

:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>
